import './workbench.less'
/**
 * 工作台
 */
export default {
  name: 'Workbench',
  data() {
    return {
      collection: [
        {
          title: '浏览量',
          count: '2062',
          tip: '访客浏览的总次数，\n一个访客可以多次访问'
        },
        {
          title: '访客数',
          count: '306',
          tip: '访问的总人数，\n同一访客多次访问只记录1个访客'
        }
      ]
    }
  },
  render(h) {
    // 卡片盒
    const BoxCard = ({ props }) => {
      const { item } = props
      const { title, count, tip } = item
      return (
        <el-card class="box-card">
          <div slot="header" class="flex flex-just-sb flex-align-center ">
            <span class="card-title">{title}</span>
            <el-tooltip effect="dark" content={tip} placement="top">
              <i class="el-icon-warning card-icon"></i>
            </el-tooltip>
          </div>
          <div class="content">{count}</div>
        </el-card>
      )
    }

    return (
      <div class="workbench">
        <el-row gutter={20}>
          {
            this.collection.map(v => (
              <el-col span={8}>
                <BoxCard item={v} />
              </el-col>
            ))
          }
        </el-row>
      </div>
    )
  }
}